<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>聊天记录</title>

  <!-- 引入样式 -->
  <link rel="stylesheet" href="layui/css/layui.css">
  <!-- 引入组件库 -->
  <script src="layui/layui.all.js"></script>
  <script src="moment.min.js"></script>
  <script src="util.js"></script>
  <style>
    body .layim-chat-main {
      overflow-y: auto;
    }

    .layim-chat-user cite {
      text-align: left;
      font-style: normal;
    }

    .layim-chat-text {
      background-color: #e2e2e2;
      color: #5FB878;
      word-break: break-all;
    }

    .layim-chat-mine .layim-chat-text {
      margin-left: 0;
      text-align: right;
      color: #000;
    }

    .layim-chat-mine .layim-chat-user {
      text-align: right;
    }

  </style>
</head>
<body>

<div class="layim-chat-main" id="chatHistory">
  <ul id="LAY_view"></ul>
</div>

<div id="LAY_page" style="margin: 0 10px;"></div>


<textarea title="消息模版" id="LAY_tpl" style="display:none;">
{{# layui.each(d.data, function(index, item){
  if(item.userId == d.mineId){ }}
    <li class="layim-chat-mine">
      <div class="layim-chat-user"><cite><i>{{ formatTime(item.timeStamp) }}</i>{{ item.userName }}</cite></div>
      <div class="layim-chat-text">{{ item.content }}</div></li>
  {{# } else { }}
    <li><div class="layim-chat-user"><cite>{{ item.userName }}<i>{{ formatTime(item.timeStamp) }}</i></cite></div><div
        class="layim-chat-text">{{ item.content }}</div></li>
  {{# }
}); }}
</textarea>
<script>
  layui.use(['laypage'], function () {
    var layer = layui.layer
        , laytpl = layui.laytpl
        , $ = layui.jquery
        , laypage = layui.laypage;
    //console.log(param)
    var sendId = getUrlParameter('sendId');
    var typeStr = getUrlParameter('type');
    var userId = getUrlParameter('userId');
    var type = typeStr == 'Group' ? 1 : 0;
    var pageSize = 10;
    var getChatHistory = function (page) {
      let data = {
        pageNumber: page > 0 ? page : 1,
        pageSize: pageSize,
        obj: {
          userId: userId,
          sendId: sendId,
          type: type
        }
      };
      $.ajax({
        url: "http://" + window.location.host + '/chatMessage/historyChat'
        , type: 'post'
        , contentType: 'application/json'
        , data: JSON.stringify(data)
        , success: function (res) {
          console.log('req:', res);
          if (res && res.rows && res.rows.length > 0) {
            res.rows.reverse();
            var html = laytpl(LAY_tpl.value).render({
              data: res.rows,
              mineId: userId
            });
            $('#LAY_view').html(html);
          } else {
            layer.msg("无聊天记录!");
          }
          if (page == 0) {
            let pages = res.total % pageSize > 0 ? 1 : 0;
            pages += parseInt(res.total / pageSize);
            laypage({
              cont: 'LAY_page'
              , pages: pages
              , first: false
              , last: false
              , jump: function (obj, first) {
                if (!first) {
                  layer.msg('第 ' + obj.curr + ' 页');
                }
                getChatHistory(obj.curr);
              }
            });
          }
        }, error: function (err, msg) {
          layer.msg("获取聊天记录出错!");
        }
      });
    }
    setResizeByIdAndHeight("chatHistory", 80);
    getChatHistory(0);
    console.log('param.sendId:', sendId);
    console.log('param.type:', type);
  });
</script>
</body>
</html>
